<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 页面管理 -->
      <!-- 顶部 -->
      <Toptoolbar>
        <template #leftbtn>
          <el-button type="primary" @click="visaddpages=true">添加页面</el-button>
        </template>
        <template #search>
          <template>
            <el-select
              v-model="value"
              clearable
              width="500px"
              filterable
              remote
              :remote-method="remotemethod"
              placeholder="请输入关键字"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.title"
                :value="item.title"
              />
            </el-select>
          </template>
          <el-button icon="el-icon-search" @click="searchbtn" />

        </template>
      </Toptoolbar>
      <!--表格  -->
      <el-card class="box-card">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="title"
              label="标题"
              width="360"
            />
            <el-table-column
              prop="content"
              label="内容"
              width="360"
            >
              <template v-slot="{row}">
                <p v-html="row.content" />
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
            >
              <template v-slot="{row}">
                <el-button type="primary" size="medium" @click="putpages(row.id)">编辑</el-button>
                <el-button type="success" size="medium" @click="delpages(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <el-row type="flex" justify="center" class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="dataquery._limit"
              :current-page.sync="page"
              @current-change="currentChange"
            />
          </el-row>
        </template>
        <!-- 弹窗 -->
        <addpages ref="addpages" :visaddpages.sync="visaddpages" @gettablelist="gettablelist()" />
      </el-card>

    </div>
  </div>

</template>
<script>
import { getPagelist, getTotal, delPages } from '@/api/pages'
import addpages from './components/addpages.vue'
export default {
  components: { addpages },
  data() {
    return {
      tableData: [],
      dataquery: {
        _limit: 2,
        _start: 0,
        title_contains: ''
      },
      total: 0, // 页面数量
      visaddpages: false,
      value: '', // 搜索下拉菜单
      loading: false,
      options: {}, // 搜索下拉菜单
      page: 1// 当前页数
    }
  },
  async created() {
    console.log(8888888, '页面渲染')
    this.gettablelist()// 获取页面列表
  },
  methods: {
    // 获取页面列表
    async   gettablelist() {
      const current = (this.page - 1) * this.dataquery._limit
      const res = await getPagelist({ _limit: this.dataquery._limit, _start: current })
      this.tableData = res.data
      const total = await getTotal()// 获取页面数量
      this.total = total.data
    },
    // 获取页面详情数据回填
    putpages(id) {
      this.$refs.addpages.getpagedetails(id)
      this.visaddpages = true
    },
    // 删除
    async delpages(id) {
      console.log(118, id)
      this.$confirm('确定要删除该页面吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调接口
        await delPages(id)
        if (this.tableData.length <= 1 && this.page !== 1) {
          this.page--
        }
        // 提示
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 渲染
        this.gettablelist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页-页码发生改变时触发
    currentChange(val) {
      // 这里有问题 添加页面，不能自动渲染

      if (val === 1) {
        this.page = 1
      } else {
        this.page = val
      }
      this.gettablelist()
    },
    // 搜索,下拉列表
    // 接收当前输入的值作为参数
    async  remotemethod(val) {
      this.loading = true
      const res = await getPagelist({ title_contains: val })
      // console.log(188, res)
      this.loading = false
      this.options = res.data
    },
    // 点击搜索渲染
    searchbtn() {
      this.tableData = this.options
      this.value = ''
    },
    sizechange(val) {
      console.log(167, val)
    }
  }
}
</script>
<style lang="scss" scoped>
.pagination{
  margin-top: 20px;
}
</style>
